import React, { useEffect, useState } from 'react'
import { BellOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { NavBar, Toast } from 'antd-mobile'
import instance from '../../axios/instance'
import { Tabs } from 'react-vant'
import './eniter.css'
import { PayCircleOutline } from 'antd-mobile-icons'

function Index() {
  const navigate = useNavigate()
  const tx = localStorage.getItem('headPic')
  const [byData, setByData] = useState([])

  //病友圈病症
  useEffect(() => {
    instance.get('/health/share/knowledgeBase/v1/findDepartment').then(res => {
      console.log('resby', res)
      if (res.status === 200) {
        setByData(res.data.result)
      }
    })
  }, [])

  //病友圈列表
  const [departmentId, setDepartmentId] = useState(1)
  const [page, setPage] = useState(1)
  const [count, setCount] = useState(10)
  const [byqList, setByqList] = useState([])
  // 新增时间转换函数，将时间戳转为 YYYY - MM - DD HH:mm:ss 格式
  const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hour = date.getHours().toString().padStart(2, '0');
    const minute = date.getMinutes().toString().padStart(2, '0');
    const second = date.getSeconds().toString().padStart(2, '0');
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  };

  useEffect(() => {
    instance.get('/health/user/sickCircle/v1/findSickCircleList', {
      params: {
        departmentId: departmentId,
        page: page,
        count: count
      }
    }).then(res => {
      console.log('resByList', res)
      if (res.status === 200) {
        setByqList(res.data.result)
      }
    })
  }, [departmentId, count, page])

  const handelBY = (active) => {
    const setBy = byData[active]
    if (setBy) {
      setDepartmentId(setBy.id)
      setPage(1)
    }
  }

  //点击跳转病友圈详情
  const handelEnDetail=(id)=>{
    console.log(id)
    navigate(`/eniterDetail/${id}`)
  }

  return (
    <div>
      <NavBar onBack={() => navigate(-1)} style={{ height: "60px" }}
        left={<img src={tx} style={{ width: '40px', height: '40px', borderRadius: '50%' }} />}
        right={<BellOutline style={{ fontSize: '30px' }} />}
        backIcon={false}></NavBar>
      {/* 病友圈切换 */}
      <Tabs onChange={handelBY} active={byData.findIndex(item => item.id = departmentId)}>
        {
          byData.map((item, index) => (
            <Tabs.TabPane title={item.departmentName} key={index}>
              {
                byqList.length > 0 ? (
                  byqList.map((itm, ind) => {
                    return <div key={ind} className='byq' onClick={()=>handelEnDetail(itm.sickCircleId)}>
                      <div className='bt'>
                        <h2>{itm.title}</h2>
                        <div className='xs'>{itm.amount === 0 ? '' : <div><PayCircleOutline color='orange' />{itm.amount}</div>}</div>
                      </div>
                      <p>{formatTime(itm.releaseTime)}</p>
                      <p>{itm.detail}</p>
                      <p className='scs'>
                        <span style={{ marginRight: "10px" }}>收藏数：{itm.collectionNum}</span>
                        <span>建议数：{itm.commentNum}</span>
                      </p>
                    </div>
                  })
                ) : ''
              }
            </Tabs.TabPane >
          ))
        }

      </Tabs>
    </div>
  )
}

export default Index
